<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加学校</title>
		<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
		<style>
			div{
				background: pink;
				width: 300px;
			/* 	border: 1px solid gray;*/
				border-radius: 5px; 
				padding: 5px;
				margin: 3px;
				
			}
			input,textarea{
				width: 170px;
				line-height: 25px;
			}
			label{
				width: 120px;
				vertical-align: top;
				line-height: 25px;
			}
			div:last-child{
				text-align: right;
			}
			div:last-child input{
				width: 80px;
			}
		</style>
	</head>
	<body>
	    <h1><a href="../listSchool">查询所有学校</a></h1>
	    <hr>
		<h1>添加学校</h1>
		<form action="#" method="get">
			<div>
				<label>学校名字:</label>
				<input type="text" name="scName" />
			</div>
			<div>
				<label>学校地址:</label>
				<textarea name="scAddress" cols="21" rows="2"></textarea>
			</div>
			<div>
				<label>学校人数:</label>
				<input type="number" name="scTotal" />
			</div>
			<div>
				<label>学校面积:</label>
				<input type="text" name="scArea" />
			</div>
			<div>
				<label>建校日期:</label>
				<input type="datetime" name="scBirth" />
			</div>
			<div>
				<input type="submit" id="submit" value="提交" />
				<input type="reset" id="reset" value="重置" />
			</div>
		</form>
		<h1 id="msg" style="color:red"></h1>
	</body>
	<script type="text/javascript">
	      // 什么时候发异步请求： 单击提交按钮的时候
	      $("#submit").click(function(){
	    	  // -- scName=aa&scAddress=aa&scTotal=1&scArea=11&scBirth=1920-10-23
	    	  var dataStr =  $("form").serialize();// 将表单数据序列化为key=value&key=value.....的格式 
	    	  $.ajax({
	    		  url:"../add.do?"+dataStr,
	    		  type:"get",
	    		 // data:dataStr,// 传递到服务器的数据
	    		  dataType:"json",
	    		  // 传数据到服务器: 获取window.localStorage中数据，传输到服务器。
	    		  headers:{
	    			  "login": window.localStorage.getItem("flag"),
	    			  "token":window.localStorage.getItem("token")
	    			  },
	    		  success:function(data){ // data={"msg":true/false}
	    			  if(data.msg){// true
	    				  // --提示插入成功
	    				  console.log("插入成功")
	    				  $("#msg").html("插入成功");
	    			      var ipts = $("form input");
	    			      // -- 清空form表单的数据
	    			      $("form textarea").val("");
	    			      for(var i=0 ; i <ipts.length-2; i++){
	    			    	  $(ipts[i]).val("");
	    			      }
	    			  }else{//false
	    				  console.log("插入失败")
	    				  $("#msg").html("插入失败");
	    			  }
	    		  }
	    	  })
	    	  return false;// 
	      })
	      
	</script>
</html>
